<header id="navigation" class="p-navigation">
  <div class="p-navigation__row">
    <div class="p-navigation__banner">
      <div class="p-navigation__logo">
        <a class="p-navigation__link" href="/">
          <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/7f93bb62-snapcraft-logo--web-white-text.svg" alt="Snapcraft" />
        </a>
      </div>
      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
    </div>
    <nav class="p-navigation__nav">
      <span class="u-off-screen">
        <a href="#main-content">Jump to main content</a>
      </span>
      <ul class="p-navigation__links" role="menu">
        <li
          class="p-navigation__link {% if page_slug == 'store' %}is-selected{% endif %}"
          role="menuitem"
        >
          <a href="/store">
            Store
          </a>
        </li>
        <li
          class="p-navigation__link {% if page_slug == 'blog' %}is-selected{% endif %}"
          role="menuitem"
        >
          <a href="/blog">
            Blog
          </a>
        </li>
        <li
          class="p-navigation__link {% if page_slug == 'iot' %}is-selected{% endif %}"
          role="menuitem"
        >
          <a href="/iot">
            IoT
          </a>
        </li>
        <li
          class="p-navigation__link {% if page_slug == 'build' %}is-selected{% endif %}"
          role="menuitem"
        >
          <a href="/build">
            Build
          </a>
        </li>
        <li
          class="p-navigation__link {% if page_slug == 'docs' %}is-selected{% endif %}"
          role="menuitem"
        >
          <a href="{{ url_for('discourse_docs.document_view') }}">
            Docs
          </a>
        </li>
        <li class="p-navigation__link" role="menuitem"><a class="p-link--external" href="https://forum.snapcraft.io/categories">Forum</a></li>
      </ul>

      <ul class="p-navigation__links" role="menu">
        {% if user_name %}
          <li class="p-navigation__link p-subnav" role="menuitem" id="link-1">
            <a class="p-subnav__toggle" aria-controls="account-menu" aria-expanded="false">
              {{ user_name }}
            </a>
            <ul class="p-subnav__items--right" id="account-menu" aria-hidden="true">
              <li>
                <a href="/account/snaps" class="p-subnav__item">My published snaps</a>
              </li>
              <li>
                <a href="{{ BSI_URL }}/auth/authenticate" class="p-subnav__item">Build with GitHub</a>
              </li>
              <li>
                <a href="/account/details" class="p-subnav__item">Account details</a>
              </li>
              <li>
                <a href="/logout" class="p-subnav__item">Sign out</a>
              </li>
            </ul>
          </li>
        {% else %}
          <li class="p-navigation__link" role="menuitem"><a href="/account"><i class="p-icon--user"></i> Developer account</a></li>
        {% endif %}
      </ul>
    </nav>
  </div>
</header>
